<template>
	<view>
		<u-card :head-border-bottom="false" :foot-border-top="false">
			<view slot="body" class="u-flex u-flex-col">
				<view class="u-flex u-row-around" style="width: 100%;">
					<view class="u-flex-col">
						<view class="u-text-center">累计佣金</view>
						<view class="u-text-center">￥{{info.rebate_total}}</view>
					</view>
					<view class="u-flex-col">
						<view class="u-text-center">累计订单</view>
						<view class="u-text-center">{{info.order_total}}</view>
					</view>
				</view>
				<view class="u-flex u-row-around u-m-t-40" style="width: 100%;">
					<view class="u-flex-col">
						<view class="u-text-center">今日预计佣金</view>
						<view class="u-text-center">￥{{info.today_rebate}}</view>
					</view>
					<view class="u-flex-col">
						<view class="u-text-center u-font-md">今日新增订单</view>
						<view class="u-text-center">{{info.today_order}}</view>
					</view>
				</view>
			</view>
			<view slot="foot"></view>
		</u-card>
		<view class="u-p-30">
			<u-grid :col="4">
				<u-grid-item @click="show=true">
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">推广码</view>
				</u-grid-item>
				<u-grid-item @click="toPage('pages/user/distributor')">
					<u-icon name="rmb-circle-fill" :size="46"></u-icon>
					<view class="grid-text">推广订单</view>
				</u-grid-item>
				<u-grid-item @click="toPage('pages/user/return')">
					<u-icon name="coupon-fill" :size="46"></u-icon>
					<view class="grid-text">佣金日志</view>
				</u-grid-item>
				<!-- <u-grid-item @click="toPage('pages/user/distributor')">
						<u-icon name="order" :size="46"></u-icon>
						<view class="grid-text">分销订单</view>
					</u-grid-item> -->
			</u-grid>

			<u-popup v-model="show" mode="center" border-radius="14" width="450rpx" height="480rpx">
				<image :show-menu-by-longpress="true"
					style="height: 400rpx; width: 400rpx;margin: 0 auto;display: block;"
					:src="info.member.share_qr" @longtap="previewImage"></image>
				<view class="u-text-center u-p-t-20">长按小程序码保存或者发送给好友</view>
			</u-popup>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				show: false
			};
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				this.info = await this.$u.post('/api/user/extend_center')
				console.log(this.info);
			},
			toPage(path) {
				this.$u.route({
					url: path
				})
			},
			previewImage(e) {
				console.log('e', e);
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [this.info.member.share_qr],
					// 为当前显示图片的链接/索引值
					current: this.info.member.share_qr,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					longPressActions:{
						itemList:[this.l('发送给朋友'),this.l]
					},
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						onsole.log('err', err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
